<template>
	<view class="index-container">
		<swiper autoplay="true" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="item in swiperData" :key="item._id">
					<image :src="item.imagePath"></image>
			</swiper-item>
				
		</swiper>
		
		<view class="selections">
			<view class="selection-item">
				<image src="../../static/index/icon_lz37f4rd34n/yingpian.png" mode=""></image>
				<text>影片</text>
			</view>
			
			<view class="selection-item">
				<image src="../../static/index/icon_lz37f4rd34n/yingyuan.png" mode=""></image>
				<text>影院</text>
			</view>
			
			<view class="selection-item">
				<image src="../../static/index/icon_lz37f4rd34n/daoyan.png" mode=""></image>
				<text>导演</text>
			</view>
			
			<view class="selection-item">
				<image src="../../static/index/icon_lz37f4rd34n/yanyuan.png" mode=""></image>
				<text>演员</text>
			</view>
		</view>

		<movie-scroll 
		v-for="(tagItem,index) in movieTags" 
		:key="tagItem.id" 
		:tag="tagItem.tag"
		></movie-scroll>
		
	</view>
</template>

<script>
import request from '../../utils/request.js';
// import movieScroll from '../../components/movie-scroll/movie-scroll.vue'
export default {
	data() {
		return {
			swiperData: [],
			movieTags:[
				{
					id:0,
					tag:'最新',
				},
				{
					id:1,
					tag:'热门',
				},
				{
					id:2,
					tag:'可播放',
				},
				{
					id:3,
					tag:'豆瓣高分',
				},
				{
					id:4,
					tag:'经典',
				},
				],
		};
	},
	onLoad() {
		this.getSwiperData();
		
	},
	methods: {
		async getSwiperData() {
			let swiperData = await request('/home/getBanners');
			if (swiperData.code) {
				this.swiperData = swiperData.result.rows;
			}
		},

		
	},
	// components:{
	// 	movieScroll
	// }
};
</script>

<style lang="scss" scoped>
	
.index-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-bottom: 80rpx;
}

swiper{
	width: 100%;
	height: 321rpx;
	swiper-item{
		width: 100%;
		height: 100%;
		image{
			width: 100%;
			height: 100%;
		}
	}
}

.selections{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: 110rpx;
	margin-top: 30rpx;
	
	.selection-item{
		width: 25%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
			image{
				width: 70rpx;
				height: 70rpx;
			}
	}
}

movie-scroll {
	box-sizing: border-box;
	margin: 10rpx 0;
	width: 100%;
	height: 420rpx;	
}





</style>
